<template>
  <div class="mainBasicInfo">
    <p class="title">
      刷卡芯片
    </p>
    <!--
    <div class="brand-info">
      <el-form :inline="true" :model="basicInfoData" class="demo-form-inline">
        <el-form-item label="刷卡芯片类型">
          <p>{{ basicInfoData.cardCoreElTypeName }}</p>
        </el-form-item>
        <el-form-item label="刷卡芯片品牌">
          <p>{{ basicInfoData.cardCoreElBrandName }}</p>
        </el-form-item>
        <el-form-item label="刷卡芯片型号">
          <p>{{ basicInfoData.cardCoreElModel }}</p>
        </el-form-item>
        <el-form-item label="刷卡芯片参数">
          <p>{{ basicInfoData.cardCoreElParam }}</p>
        </el-form-item>

      </el-form>
    </div>
    -->
    <div class="brand-info">
      <div class="item-info">
        <ul>
          <li class="lable">
            <div class="name">刷卡芯片类型：</div>
            <div class="desc">{{ basicInfoData.cardCoreElTypeName }}</div>
          </li>
          <li class="lable">
            <div class="name">刷卡芯片品牌：</div>
            <div class="desc">{{ basicInfoData.cardCoreElBrandName }}</div>
          </li>
          <li class="lable">
            <div class="name">刷卡芯片型号：</div>
            <div class="desc">{{ basicInfoData.cardCoreElModel }}</div>
          </li>
          <li class="lable">
            <div class="name">刷卡芯片参数：</div>
            <div class="desc">{{ basicInfoData.cardCoreElParam }}</div>
          </li>
        </ul>
      </div>
    </div>

    <!--
    <div class="brand-info type-info">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">

      </el-form>
    </div>
    -->

    <div class="brand-info img-info">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="刷卡芯片模组图片：">
          <div class="img-box">
            <el-image
              style="width: 205px; height: 186px"
              v-for="(item, index) in imgList"
              :src="item"
              :key="index"
              :preview-src-list="imgList"
            >
            </el-image>
          </div>
        </el-form-item>
      </el-form>
    </div>

  </div>
</template>
<script>
import videoPlay from "./videoPlay";

export default {
  props: {
    basicInfoData: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  components: {
    videoPlay
  },
  data() {
    return {
      formInline: {},
      isShow: false,
      videoUrl: "",
      reFresh: true,

      listData: [],
      lock_brand: [],
      openlock_type: [],
      net_app: [],
      mark_time: [],
      place: [],
      made_enterprise: [],
      insert_core_type: [],
      clutch_type: [],
      main_material: [],
      auto_type: [],
      common_y_or_n: [],
      total: 0,
      arr: [],
       cate: [
        { name: "品牌", code: "lock_brand" },
        { name: "开锁方式", code: "openlock_type" },
        { name: "联网APP", code: "net_app" },
        { name: "上市时间", code: "mark_time" },
        { name: "产地", code: "place" },
        { name: "生产企业", code: "made_enterprise" },
        { name: "插芯方式", code: "insert_core_type" },
        { name: "离合方式", code: "clutch_type" },
        { name: "主要材质", code: "main_material" }
      ],
    };
  },
  watch: {},
  mounted() {
    // this.getSearchData();
    this.cate.forEach(item => {
      this.getSearchData(item.code);
    });
  },
  computed: {
    imgList() {
      if (this.basicInfoData.cardCoreElImg) {
        return this.basicInfoData.cardCoreElImg.split(",");
      } else {
        return [];
      }
    },

  },
  methods: {
    playVideo(item) {
      this.videoUrl = item;
      // this.picture = picture;
      this.isShow = true;
    },
    closeVideo() {
      this.isShow = false;
    },
    instructions(e) {
      window.open(e, "_blank");
    },
    getopenlockType(e) {
      var arr = "";
      var arr1 = [];

      if (e) {
        arr = e.split(",");
      }
      for (let i = 0; i < this.openlock_type.length; i++) {
        for (let j = 0; j < arr.length; j++) {
          if (this.openlock_type[i].dictKey == arr[j]) {
            arr1.push(this.openlock_type[i].dictValue);
          }
        }
      }
      if (arr1.length > 0) {
        return (arr1 = arr1.join("|"));
      } else {
        return "";
      }
    },

    // getmainMaterial(e) {
    //   var arr = "";
    //   var arr1 = [];
    //   console.log("eeee=" + e);
    //   if (e) {
    //     arr = e.split(",");
    //   }
    //   for (let i = 0; i < this.main_material.length; i++) {
    //     for (let j = 0; j < arr.length; j++) {
    //       if (this.main_material[i].dictKey == arr[j]) {
    //         arr1.push(this.main_material[i].dictValue);
    //       }
    //     }
    //   }
    //   if (arr1.length > 0) {
    //     return (arr1 = arr1.join("|"));
    //   } else {
    //     return "";
    //   }
    // },
    getmainMaterial(e) {
      var str = "";
      this.main_material.forEach(item => {
        if (item.dictKey == e) {
          str = item.dictValue;
        }
      });

      return str;
    },
    getautoType(e) {
      var str = "";
      this.auto_type.forEach(item => {
        if (item.dictKey == e) {
          str = item.dictValue;
        }
      });

      return str;
    },

    getWhether(e) {
      var str = "";
      this.common_y_or_n.forEach(item => {
        if (item.dictKey == e) {
          str = item.dictValue;
        }
      });

      return str;
    },
    getSearchData(code) {
      const params = {
        code
      };
      this.$axios
        .$get("/blade-system/dict-biz/one-child-list", {
          params
        })
        .then(res => {
          if (res.success) {
            if (code === "lock_brand") {
              this.lock_brand = res.data;
            }
            if (code === "openlock_type") {
              this.openlock_type = res.data;
            }
            if (code === "net_app") {
              this.net_app = res.data;
            }
            if (code === "mark_time") {
              this.mark_time = res.data;
            }
            if (code === "place") {
              this.place = res.data;
            }
            if (code === "made_enterprise") {
              this.made_enterprise = res.data;
            }
            if (code === "insert_core_type") {
              this.insert_core_type = res.data;
            }
            if (code === "clutch_type") {
              this.clutch_type = res.data;
            }
            if (code === "main_material") {
              this.main_material = res.data;
            }
            if (code === "common_y_or_n") {
              this.common_y_or_n = res.data;
            }
             if (code === "auto_type") {
              this.auto_type = res.data;
            }

          }
        });
    }
  }
};
</script>
<style scoped>
.mainBasicInfo {
  width: 100%;
  height: 100%;
}
.title {
  height: 46px;
  line-height: 46px;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #263c92;
  border-bottom: 1px solid #b1b7ca;
  width: 100%;
}
.brand-info {
  margin: 35px 0;
  border-bottom: 1px solid #b1b7ca;
}
.el-form-item {
  width:35%;
  margin: 0;
}
/deep/.el-form-item__label {
  width: 120px;
  color: #888888;
}
.type-info .el-form-item {
  margin-right: 130px;
}
.img-info .el-form-item {
  margin-right: 0;
}
.img-info /deep/.el-form-item__label {
  width: 130px;
}
.img-box img:last-child {
  margin-right: 0;
}
.img-box .el-image {
  width: 205px;
  height: 186px;
  margin-right: 32px;
  background-color: #e1e2e8;
}
.video-info {
  border-bottom: none;
}
.video-img {
  width: 205px;
  height: 186px;
}
.item-info {
  width: 100%;
  height: 115px;
  display: flex;
  max-width: 926px;
  margin-bottom: 40px;
}
.item-left {
  width: 460px;
  display: flex;
  height: 112px;
}
.lable {
  width: 49%;
  height: 28px;
  float: left;
  display: flex;
  line-height: 28px;

  border-top: 1px solid #e4e4e4;
  border-left: 1px solid #e4e4e4;
  border-right: 1px solid #e4e4e4;
}
.item-info ul li:last-child {
  border-bottom: 1px solid #e4e4e4;
}
.item-info ul li:nth-last-child(2) {
  border-bottom: 1px solid #e4e4e4;
}
.lable .name {
  width: 133px;
  background: #f3f2f2;
  text-align: right;
  padding-right: 20px;
}
.lable .desc {
  padding-left: 18px;
}
.item-info ul {
  height: 115px;
  width: 100%;
}
</style>
